<template>
  <div class="row">
    <div class="col-12">
      <card :title="table1.title" :subTitle="table1.subTitle">
        <div slot="raw-content" class="table-responsive">
          <paper-table :data="table1.data" :columns="table1.columns">
          </paper-table>
        </div>
      </card>
    </div>

    <div class="col-12">
      <card class="card-plain">
        <div class="table-full-width table-responsive">
          <paper-table
            type="hover"
            :title="table2.title"
            :sub-title="table2.subTitle"
            :data="table2.data"
            :columns="table2.columns"
          >
          </paper-table>
        </div>
      </card>
    </div>
  </div>
</template>
<script>
import { PaperTable } from "@/components";
const tableColumns = ["Id", "走", "跑", "躺", "上下楼梯"];
const tableColumns2=["Id","开心","愤怒","平静","悲伤"]
const tableData = [
  
  {
    id: 1,
    走: "1h13min",
    跑: "12min",
    躺: "5min",
    上下楼梯: "9min",
  },
  {
    id: 2,
    走: "36min",
    跑: "9min",
    躺: "34min",
    上下楼梯: "1min",
  },
  {
    id: 3,
    走: "1h5min",
    跑: "53min",
    躺: "1h35min",
    上下楼梯: "35min",
  },
  {
    id: 4,
    走: "23min",
    跑: "15min",
    躺: "48min",
    上下楼梯: "49min",
  },
  {
    id: 5,
    走: "5min",
    跑: "48min",
    躺: "6min",
    上下楼梯: "2h48min",
  },
];
const tableData2 = [
  {
    id:1,
    开心:"70%",
    愤怒:"23%",
    平静:"4%",
    悲伤:"3%"
  },
  {
    id:2,
    开心:"12%",
    愤怒:"32%",
    平静:"23%",
    悲伤:"33%"
  },
  {
    id:3,
    开心:"10%",
    愤怒:"12%",
    平静:"63%",
    悲伤:"15%"
  },
  {
    id:4,
    开心:"35%",
    愤怒:"15%",
    平静:"41%",
    悲伤:"9%"
  },
  {
    id:5,
    开心:"75%",
    愤怒:"8%",
    平静:"12%",
    悲伤:"5%"
  }




]
export default {
  components: {
    PaperTable,
  },
  data() {
    return {
      table1: {
        title: "运动数据一览",
        subTitle: "依据动作识别模型计算运动时间",
        columns: [...tableColumns],
        data: [...tableData],
      },
      table2: {
        title: "心理数据一览",
        subTitle: "依据心理分类模型预测心情",
        columns: [...tableColumns2],
        data: [...tableData2],
      },
    };
  },
};
</script>
<style></style>

